<template>
  <div class="main">
    <keep-alive>
      <component :is = "currentComponent" class="Components"></component>
    </keep-alive>
    <tool-bar ref="toolBar" @onChangeFragment = "onChangeFragment"></tool-bar>
  </div>
</template>

<script>
// @ is an alias to /src
import ToolBar from '@c/currency/ToolBar'
export default {
  name: 'Main',
  components: {
    ToolBar,
    'home': () => import('@c/Home'),
    'shopping': () => import('@c/Shopping'),
    'my': () => import('@c/My')
  },
  data () {
    return {
      currentComponent: 'home'
    }
  },
  activated () {
    this.pushFragment()
  },
  methods: {
    /**
     * 指定加载的页面组件
     */
    pushFragment () {
      // 获得组件加载的下标
      let componentIndex = this.$route.params.componentIndex
      // 如果没有下标的话，直接让方法return掉
      if (!componentIndex) return
      this.$refs.toolBar.pushFragment(componentIndex)
    },
    onChangeFragment (componentName) {
      this.currentComponent = componentName
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
  .test {
    font-size: px2rem(16);
  }
  .main {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
</style>
